<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    template="/mytemplate.xhtml">
    <h:head>
        <h:outputStylesheet name="css/main.css"/>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <script src="/resources/js/tabbedmaxcontent.js" type="text/javascript"> </script>
        
    </h:head>
    <h:body>
      <p:gmap id="gmap"
              center="#{equipmentCreateMap.currentEquipment.latityde}, #{equipmentCreateMap.currentEquipment.longitude}"
              style="height:360px" zoom="#{equipmentCreateMap.zoom}"
              type="HYBRID"
              model="#{equipmentCreateMap.markerModel}"
              onPointClick="handlePointClick(event);"
              widgetVar="map">
       
        <p:ajax event="overlaySelect" listener="#{equipmentCreateMap.onMarkerSelect}"/>
        <p:ajax event="stateChange" listener="#{equipmentCreateMap.onStateChange}" />
        
        <p:gmapInfoWindow rendered="true">
            <p:outputPanel style="text-align:center;display:block;margin:auto">
                <h:outputText value="Name: #{equipmentCreateMap.selectMarker.data.name}" />
                <br />
                <h:outputText value="Address: #{equipmentCreateMap.selectMarker.data.address}" />
                <br />
                <h:outputText value="Type: #{equipmentCreateMap.selectMarker.data.type}" />
            </p:outputPanel>
        </p:gmapInfoWindow>
      
      </p:gmap>
        
       <p:dialog widgetVar="dlg" showEffect="fade" onHide="toNull()">
            
                <h:panelGrid columns="2">
                    <h:outputLabel for="title" value="Name: " />
                    <p:inputText id="name" value="#{equipmentCreateMap.currentEquipment.name}" />
                    
                    <h:outputLabel id="address" value="Address: " />
                    <p:inputText value="#{equipmentCreateMap.currentEquipment.address}" />
                    
                    <h:outputLabel  value="Equipment template: " />
                    <p:selectOneMenu value="#{equipmentCreateMap.templateName}" >
                        <f:selectItems value="#{equipmentCreateMap.templateNames}" />
                    </p:selectOneMenu>
                    
                    <f:facet name="footer">
                        <p:commandButton value="Create" update="gmap"
                                actionListener="#{equipmentCreateMap.createEquipment}"
                                oncomplete="markerAddComplete()"/>
                            
                        <p:commandButton value="Cancel" onclick="cancel()"/>
                    </f:facet>
                </h:panelGrid>

                <h:inputHidden id="lat" value="#{equipmentCreateMap.currentEquipment.latityde}" />  
                <h:inputHidden id="lng" value="#{equipmentCreateMap.currentEquipment.longitude}" />
            
       </p:dialog>
      
      <script type="text/javascript">  
            var currentMarker = null;
      
            function handlePointClick(event) {
                if(currentMarker == null) {
                    document.getElementById('mainForm:lat').value = event.latLng.lat();  
                    document.getElementById('mainForm:lng').value = event.latLng.lng();

                    currentMarker = new google.maps.Marker({
                        position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
                    });

                    map.addOverlay(currentMarker);

                    dlg.show();
                }
            }

            function markerAddComplete() {
                var name = document.getElementById('mainForm:name');
                name.value = "";
                dlg.hide();
            }

            function cancel() {
                dlg.hide();
                
            }
            
            function toNull(){
                if (currentMarker != null){
                    currentMarker.setMap(null);
                    currentMarker = null;
                }
            }
    </script>
      
    </h:body>
</html>